<template>
  <div ref="graph" style="width: 100%;height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
import man from '@/views/oneKeySearch/img/man.png';
import woman from '@/views/oneKeySearch/img/woman.png'
export default {
  name: "graph",
  props:{
    param:{
      type:Object,
      default:()=>{}
    }
  },
  watch:{
    param:{
      deep:true,
      immediate:true,
      handler:function(val){
        if (val!==undefined){
          this.$nextTick(()=>{
            this.init(val)
          })
        }
      }
    }
  },
  mounted() {
    this.init([])
  },
  methods:{
    init(val){
      const myChart = echarts.init(this.$refs.graph);
      console.log('val---------',val)
      var list =val;
      var links = list.map(item => {
        return {
          source: list[0].name,
          target: item.name,
          relation: item.relation
        }
      })
      var data = list.map((item, index) => {
        var size = index===0?100:80
        var img = ''
        img = item.sex==='男'?'image://'+man:'image://'+woman
        let label = {
          normal: {
            show: true,
            position: 'insideBottom'
          },
        }
        return {
          name: item.name,
          relation: item.relation,
          sex: item.sex,
          symbol: img,
          symbolSize: size,
          draggable: true,
          category: 0,
          label: label
        }
      })
     let option = {
        // backgroundColor: '#000e2f',
        tooltip: {
          show:false
        },
        animationDurationUpdate: 2000,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'force',
            force: {
              repulsion: 2000,
              edgeLength: [10, 150],
            },
            roam: true,
            data: data,
            links: links,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0,
                color: {
                  colorStops: [{
                    offset: 1,
                    color: "rgba(255,221,77,0.4)"
                  },
                    {
                      offset: 0,
                      color: "#FDE16B"
                    }],
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  type: "linear",
                  global: false
                }
              },
            },
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12,
                  color:'#10F3FC'
                },
                formatter: function(param){
                  return param.data.target===param.data.source?'':(param.data.relation!==undefined?param.data.relation:'')
                }
              }
            }
          },
        ],
      }
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>

</style>
